<template>
  <view class="box1">
    <view class="box_item" v-for="(item, index) in list" @click="goPage(item)">
      <view class="title">
        <view class="title_text">{{ item.title }}</view>
        
        <view
          class="type"
          :style="{
            background: bacMapping[item.condition ].background,
            color: bacMapping[item.condition ].color,
          }"
        >
          {{ bacMapping[item.condition ].text }}
        </view>
      </view>
      <view class="content"> 关联课程：{{item.kecheng[0].title}} </view>
      <view class="time"> 活动时间：{{item.start_time}}-{{item.end_time}} </view>
    </view>

    <view class="empty_view" v-if="list && list.length == 0">
      <image
        class="item_left_clickable"
        src="../../../static/images/my/kong.png"
        mode=""
      ></image>
      <view >当前没有相关数据，请查看其他分类或功能。</view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    list:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      // list: [
      //   {
      //     title: "日历打卡 | 活动期间学习巴蜀课程",
      //     content: "关联课程：巴蜀人文风貌详解",
      //     time: "活动时间：2023年9月7日-2023年10月27日",
      //     live_id: 1,
      //   },
      //   {
      //     title: "日历打卡 | 活动期间学习巴蜀课程",
      //     content: "关联课程：巴蜀人文风貌详解",
      //     time: "活动时间：2023年9月7日-2023年10月27日",
      //     live_id: 2,
      //   },
      //   {
      //     title: "日历打卡 | 活动期间学习巴蜀课程",
      //     content: "关联课程：巴蜀人文风貌详解",
      //     time: "活动时间：2023年9月7日-2023年10月27日",
      //     live_id: 3,
      //   },
      //   {
      //     title: "日历打卡 | 活动期间学习巴蜀课程",
      //     content: "关联课程：巴蜀人文风貌详解",
      //     time: "活动时间：2023年9月7日-2023年10月27日",
      //     live_id: 4,
      //   },
      //   {
      //     title: "日历打卡 | 活动期间学习巴蜀课程",
      //     content: "关联课程：巴蜀人文风貌详解",
      //     time: "活动时间：2023年9月7日-2023年10月27日",
      //     live_id: 5,
      //   },
      //   {
      //     title: "日历打卡 | 活动期间学习巴蜀课程",
      //     content: "关联课程：巴蜀人文风貌详解",
      //     time: "活动时间：2023年9月7日-2023年10月27日",
      //     live_id: 6,
      //   },
      // ],
      bacMapping: [
        {
          id: 1,
          background: "rgba(85,184,119,0.3)",
          text: "免费",
          color: "#55B877",
        },
        {
          id: 2,
          background: "linear-gradient(to right, #C9F3BF 0%, #8CD7A3 100%)",
          text: "元气",
          color: "#30633A",
        },
        {
          id: 3,
          background: "linear-gradient(to right, #FBF5DD 0%, #FABC81 100%)",
          text: "启初",
          color: "#634730",
        },
        {
          id: 4,
          background: "linear-gradient(to right, #D7D9F5 0%, #CFA5E3 100%)",
          text: "青空",
          color: "#442447",
        },
        {
          id: 5,
          background: "linear-gradient(to right, #BBE1FF 0%, #7EC6FF 100%)",
          text: "无极",
          color: "#303163",
        },
        {
          id: 6,
          background: "linear-gradient(to right, #D7E3EF 0%, #6C87D0 100%)",
          text: "返朴",
          color: "#303163",
        },
      ],
    };
  },
  methods: {
    goPage(item) {
      uni.navigateTo({
        url: `/pages/training/trainDetail?id=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  width: 100%;
  // padding: 40rpx 0 0;
  box-sizing: border-box;
  .box_item {
    width: 100%;
	background: rgba(39,39,39,0.5);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx;
    box-sizing: border-box;
    margin-bottom: 32rpx;
	
    .title {
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #EEEEEE;
      display: flex;
      .title_text{
        width: 80%;
        overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
      .type {
        // width: ;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        border-radius: 4rpx;
        padding: 4rpx 10rpx;
        margin-left: 24rpx;
      }
    }
    .content {
      font-size: 26rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #D8D8D8;
      margin-top: 16rpx;
    }
    .time {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #ADADAD;
      margin-top: 32rpx;
    }
  }
}
.empty_view {
    margin-top: 300rpx;
    image {
      margin: 0 auto;
      width: 410rpx;
      height: 410rpx;
    }
    view {
      font-size: 30rpx;
      color: #d8d8d8;
      text-align: center;
    }
  }
</style>